建立虛擬屬性-由狀態組合而成

從 文件上面看

計算屬性的結果會被緩存，除非依賴的響應式屬性變化才會重新計算。注意，如果某個依賴(比如非響應式屬性)在該實例範疇之外，則計算屬性是不會被更新的。

在 data 的資料 是這樣呈現：
假設我在實體資料存了 價錢 打折和稅的資料，
我可能得在 vue 的輸出畫面 呈現 {{ fullPricediscountfee}}
但是如在很多地方都要放這個計算過後的資料，就會顯得很麻煩，
所以虛擬一個資料庫 放計算過後的資料（這個資料並不存在，是我們虛擬而成的）
直接叫做 {{price}} 。

data:{
 fullPrice:5000,
 discount:0.8,
 fee:100
}

1.計算價格

 <h3>
 {{ price }} 
 </h3>

data:{
    fullPrice: 5000,
    discount: 0.8,
    fee: 100
},
computed: {
    price(){
        let temp = this.fullPrice*this.discount
        return temp+this.fee   //4100
    }
}

2.組合名字

 <h3>
 {{ fullName }}
 </h3>

 data:{
    lastName: "Wang",
    firstName: "Lala",
    
},
   computed:{
    fullName(){
        let fullName = this.lastName+this.firstName;
        return  fullName
   }
 }
   
  

3.組合CSS

<h3 :style="themstyle"> text</h3>

data:{
    bgColor: "yellow",
    textColor: "black",
    
},

 computed:{
   themstyle(){
     return {
       "background-color":this.bgColor,
       "color":this.black
     }
   }

雙向計算屬性

自訂取、給值規則

• getter 自訂取得的實際運作
• setter 設定的實際運作
  在取得 / 設定時觸發額外動作

在模擬層我們經過計算 取出來的值，是我們getter 到的
而我們輸入值 fullName 在模擬層經過計算拆成 firstName LastName 放在實際資料庫 則是setter，
之前前面的案例，都是getter，那接下來是要教模擬層 幫我們拆解setter設定到實際資料。

監看改變-watch

• 變數發生變化時偵測觸發
  傳入引數-改變後 / 改變前
  e.g. 使用者輸入 / 改變資料 / 登入… 等

<input v-model="count" />

data:{
    count: 10
},
watch: {
    count( newValue , oldValue ){
       console.log(newValue + "->" + oldValue) //10->15
       console.log("值被改變了！") 
    }
}

資料來源：動畫互動網頁特效入門
Vue 手冊